<template>
<view class='page-container'>
	<UserInfoCard></UserInfoCard>
	<Tabs
		:active-tab="activeTab"
		:tab-list="tabList"
		@change-tab="changeTab"
	></Tabs>
	<template v-if="currentList && currentList.length">
		<InfoSheet
			v-for="(sheetData, idx) in currentList" 
			:key="idx"
			:sheet-data="sheetData"
			:class="{ 'first-item': idx === 0 }"
		></InfoSheet>
	</template>
	<u-empty v-else text="暂无数据" mode="favor" style="margin-top: 100rpx;"></u-empty>
</view>
</template>

<script>
import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
import Tabs from '../../../components/Tabs/tabs.vue'
import InfoSheet from '../../../components/InfoSheet/InfoSheet.vue'
export default {
	components: {
		UserInfoCard,
		Tabs,
		InfoSheet,
	},
	data(){
		return {
			activeTab: 'assessment',
			tabList:[
				{ label: '评价', value: 'assessment' },
				{ label: '满意度调查', value: 'satisfaction' },
			],
			assessmentList:[
				{
					title: '门诊',
					doctor: '林莜有',
					visitDept: '内科',
					time: '2025-01-01'
				},
				{
					title: '住院',
					doctor: '周一天',
					hospitalDept: '内科',
					time: '2025-01-01'
				},
				{
					title: '在线问诊',
					doctor: '林莜有',
					visitDept: '内科',
					time: '2025-01-01'
				},
			],
			satisfactionList:[
				{
					title: '门诊',
					doctor: '林莜有',
					visitDept: '内科',
					time: '2025-01-01'
				},
				{
					title: '住院',
					doctor: '周一天',
					hospitalDept: '内科',
					time: '2025-01-01'
				},
			]
		}
	},
	computed: {
		// 根据当前activeTab返回对应的列表
		currentList() {
			switch(this.activeTab) {
				case 'assessment':
					return this.transformData(this.assessmentList)
				case 'satisfaction':
					return this.transformData(this.satisfactionList)
				default:
					return [];
			}
		}
	},
	methods:{
		changeTab(tab) {
			this.activeTab = tab;
		},
		transformData(rawData) {
			return rawData.map(item => ({
				sheetTitle: item.title,
				coverBtn: this.activeTab == 'assessment'? '立即评价' : '立即填写',
				fields: [
					{ label: '就诊医生', value: item.doctor },
					{ label: '住院科室', value: item.hospitalDept },
					{ label: '就诊科室', value: item.visitDept },
					{ label: '就诊日期', value: item.time },
				]
			}));
		},
	}
}
</script>

<style lang='scss' scoped>
.page-container {
	background: linear-gradient(#e0f3ff 0%, #fff 50%);
	min-height: 100vh;
	padding: 20rpx;
}
.first-item {
	margin-top: 0rpx;
}
</style>